import React, { useState } from "react";

/*
  hooks是只能给函数组件用，目的是让函数组件能够拥有和类组件一样的功能
  hooks是16.8版本出的
  hooks都是use开头的函数
  hooks必须要使用在函数组件的顶层

  useState就是给函数组件定义state用的
  useState执行会返回一个数组, 数组有两项，state的变量以及改变这个变量的方法
  执行的时候可以传入一个参数，是变量的初始值

  改变变量的方法是异步的
*/

const App = () => {
  const [count, set_count] = useState(5);
  const add = () => {
    // 要改成某个值，直接写值
    // set_count(10);
    // 如果要用到改变前的值，需要写成函数
    set_count((v) => v + 1);
    console.log(count);
  };

  const [msg, set_msg] = useState("hello");
  const change = () => {
    set_msg("world");
    console.log(msg);
  };

  return (
    <>
      <h3>useState</h3>
      <button>-</button>
      <span>{count}</span>
      <button onClick={add}>+</button>

      <p>{msg}</p>
      <button onClick={change}>btn</button>
    </>
  );
};

export default App;
